<template>
    <el-menu
        :default-active="activeIndex"
        :default-openeds="defaultOpeneds"
        :mode="propJson.menuModelDirection"
        :background-color="propJson.backgroundColor"
        :text-color="propJson.textColor"
        :active-text-color="propJson.activeTextColor"
        :style="execClass"
        :router="true"
        :unique-opened="propJson.uniqueOpened"
        :menu-trigger="propJson.menuTrigger"
        :collapse-transition="true"
        @select="menuSelect"
    >
        <p v-for="item in dataList" :key="item.routeTo">
            <el-menu-item :index="item.routeTo" v-if="item.children.length === 0" :style="execFirstFloorStyle">
                <el-icon><component :is="item.iconType" /></el-icon>
                {{item.title}}
            </el-menu-item>
            <el-sub-menu :index="item.routeTo" v-else :style="'background-color: ' + propJson.backgroundColor + ';'">
                <template #title>
                    <el-icon><component :is="item.iconType" /></el-icon>
                    <span :style="execFirstFloorStyle">
                        {{item.title}}
                    </span>
                </template>
                <span v-for="subItem in item.children" :key="subItem.routeTo">
                    <el-menu-item v-if="subItem.children.length === 0" :index="subItem.routeTo" :style="execSecondFloorStyle">
                        <el-icon><component :is="subItem.iconType" /></el-icon>
                        {{subItem.title}}
                    </el-menu-item>
                    <el-sub-menu v-else :index="subItem.routeTo" :style="'background-color: ' + propJson.backgroundColor + ';'">
                        <template #title>
                            <el-icon><component :is="subItem.iconType" /></el-icon>
                            <span :style="execSecondFloorStyle">
                                {{subItem.title}}
                            </span>
                        </template>
                        <el-menu-item v-for="subSonItem in subItem.children" :key="subSonItem.routeTo" :index="subSonItem.routeTo" :style="execThirdFloorStyle">
                            <el-icon><component :is="subSonItem.iconType" /></el-icon>
                            {{subSonItem.title}}
                        </el-menu-item>
                    </el-sub-menu>
                </span>
            </el-sub-menu>
        </p>
    </el-menu>
</template>

<script name="MenuComponent" setup lang="ts">
import {getCommonParamObj} from "@/utils/commonParamUtil";
import {computed, defineProps, ref} from "vue";
import {useRoute} from "vue-router";

let props = defineProps(['propJson', 'commonParam']);

let propJson = computed(() => {return props['propJson']})
let commonParam = computed(() => {return props['commonParam']})

let breadCrumbObjList = ref([])

let route = useRoute()

let activeIndex = computed(() => {
    return route.path
})

let execClass = computed(() => {
    let resStyle = "width: 100%;"
    if (propJson.value.editFlag && propJson.value.menuModelDirection === 'vertical' && propJson.value.menuHeight.endsWith('%')) {
        resStyle += "height: " + propJson.value.menuHeight.substring(0, propJson.value.menuHeight.length - 1) + "vh;";
    } else if (!propJson.value.editFlag && propJson.value.menuModelDirection === 'vertical' && propJson.value.menuHeight) {
        resStyle += "height: " + propJson.value.menuHeight + ";";
    } else if (!propJson.value.editFlag && propJson.value.menuModelDirection === 'horizontal') {
        resStyle += "height: 100%";
    } else {
        resStyle += "height: " + propJson.value.menuHeight + ";";
    }
    return resStyle;
})

let defaultOpeneds = computed(() => {
    let parentObj = {parent: ""}
    getParentRouteTo(dataList.value, route.path, parentObj, "")
    return [parentObj.parent];
})

let dataList = computed(() => {
    return propJson.value.menuJson
})

let execFirstFloorStyle = computed(() => {
    let resStyle = "";
    resStyle += "font-size: " + propJson.value.firstMenuFontSize + ";";
    resStyle += "background-color: " + propJson.value.backgroundColor + ";";
    return resStyle;
})

let execSecondFloorStyle = computed(() => {
    let resStyle = "";
    resStyle += "font-size: " + propJson.value.secondMenuFontSize + ";";
    return resStyle;
})

let execThirdFloorStyle = computed(() => {
    let resStyle = "";
    resStyle += "font-size: " + propJson.value.thirdMenuFontSize + ";";
    return resStyle;
})

// 初始化
function init() {
    if (!propJson.value.isRecordBreadCrumb) {
        return;
    }
    // 遍历菜单
    for (let firstIndex = 0; firstIndex < dataList.value.length; firstIndex++) {
        let firstMenu = dataList.value[firstIndex];
        let firstMenuRouteTo = firstMenu.routeTo;
        let firstMenuList = []
        firstMenuList.push(firstMenu)
        let obj = {
            routeTo: firstMenuRouteTo,
            routeMenu: firstMenuList
        }
        breadCrumbObjList.value.push(obj)
        // 二级菜单
        if (firstMenu.children.length > 0) {
            let childrenList = firstMenu.children;
            for (let secondIndex = 0; secondIndex < childrenList.length; secondIndex++) {
                let secondMenu = childrenList[secondIndex];
                let secondMenuRouteTo = secondMenu.routeTo;
                let secondMenuList = []
                secondMenuList.push(firstMenu);
                secondMenuList.push(secondMenu);
                let obj = {
                    routeTo: secondMenuRouteTo,
                    routeMenu: secondMenuList
                }
                breadCrumbObjList.value.push(obj);
                // 三级菜单
                if (secondMenu.children.length > 0) {
                    let thirdChildrenList = secondMenu.children;
                    for (let thirdIndex = 0; thirdIndex < thirdChildrenList.length; thirdIndex++) {
                        let thirdMenu = thirdChildrenList[thirdIndex];
                        let thirdMenuRouteTo = thirdMenu.routeTo;
                        let thirdMenuList = []
                        thirdMenuList.push(firstMenu);
                        thirdMenuList.push(secondMenu);
                        thirdMenuList.push(thirdMenu);
                        let obj = {
                            routeTo: thirdMenuRouteTo,
                            routeMenu: thirdMenuList
                        }
                        breadCrumbObjList.value.push(obj)
                    }
                }
            }
        }
    }
    getBreadCrumbList(route.fullPath);
}

init();

function getParentRouteTo(list, routeTo, parentObj, currentParent) {
    for (let i = 0; i < list.length; i++) {
        let info = list[i]
        if (info.routeTo === routeTo) {
            parentObj.parent = currentParent
            return
        }
        getParentRouteTo(info.children, routeTo, parentObj, info.routeTo)
        if (parentObj.parent !== "") {
            return
        }
    }
    parentObj.parent = "";
}

function menuSelect(val) {
    getBreadCrumbList(val);
}

function getBreadCrumbList(path) {
    for (let i = 0; i < breadCrumbObjList.value.length; i++) {
        let val = breadCrumbObjList.value[i];
        if (val.routeTo === path) {
            // 修改变量
            let obj = getCommonParamObj(commonParam.value, propJson.value.breadCrumbVariable);
            obj.variableValue = val.routeMenu;
            break;
        }
    }
}
</script>

<style scoped lang="less">
.el-menu {
    border: 0;
}
</style>